<template>
  <div class="label">
    <open-module class="zt">
      <h1 slot="title"><span>&#xe886;</span>文章标签</h1>
      <div class="center" slot="center">
        <a v-for="(v, k) of label" :key="k" @click="clickLabel(k)">
          <span class="span">
            {{ k }}
            <span>{{ v }}</span>
          </span>
        </a>
      </div>
    </open-module>
  </div>
</template>
<script>
import openModule from "components/content/openModule/OpenModule.vue";
export default {
  name: "lableSelector",
  props:{
    label:{
      type:Object,
      default(){
        return {}
      }
    }
  },
  data() {
    return {
    };
  },
  components: {
    openModule
  },
  methods: {
    clickLabel(k){
      //提交点击的标签id
      this.$emit("clickLabel",k)
    }
  },
};
</script>
<style scoped>
.label {
  position: relative;
  margin-top:-70px ;
  z-index: 2;
}
.center{
  box-sizing: border-box;
  margin-top: 0px;
  margin-bottom:20px ;
  width: 700px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}
.center .span{
  display: inline-block;
  padding: 14px;
  margin: 10px;
  border-radius:5px ;
  box-shadow:var(--shadow) ;
  transition: 0.5s;
}
.center .span:hover{
color: #fff;
background: linear-gradient(to right, #437cb6, #ca6f6c);
}
</style>